<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid blueviolet;
        }
    </style>
</head>
<body>
<!--

    1、画一个笑脸，脸上有眉毛，眼睛，鼻子，嘴巴

    2、眼睛一个填充颜色是红色的，另外一个填充颜色是蓝色的

    3、鼻子是三角形（直角三角形，锐角三角形，钝角三角形都可以），边框颜色是橙色的

    4、头上有头发，三个头发，直线（也可以是曲线）


-->
<canvas width="600" height="600" id="can"></canvas>
<script type="text/javascript">
    var can=document.getElementById("can");
    var pen=can.getContext("2d");
    pen.beginPath();
    pen.arc(200,200,80,0,Math.PI*2,true);
    pen.strokeStyle="yellow";
    pen.fillStyle="yellow";
    pen.fill();
    pen.closePath();
    pen.beginPath();
    pen.arc(175,190,14,0,Math.PI*2,true);
    pen.strokeStyle="red";
    pen.fillStyle="red";
    pen.fill();
    pen.closePath();
    pen.beginPath();
    pen.arc(227,190,14,0,Math.PI*2,true);
    pen.strokeStyle="blue";
    pen.fillStyle="blue";
    pen.fill();
    pen.closePath();
    pen.beginPath();
    pen.moveTo(200,210);
    pen.lineTo(190,230);
    pen.lineTo(210,230);
    pen.strokeStyle="orange";
    pen.fillStyle="orange";
    pen.fill();
    pen.closePath();
    pen.beginPath();
    pen.moveTo(165,242);
    pen.quadraticCurveTo(202,275,233,242);
    pen.strokeStyle="black";
    pen.moveTo(157,172);
    pen.quadraticCurveTo(175,155,190,170);
    pen.moveTo(207,172);
    pen.quadraticCurveTo(225,155,245,170);
    pen.lineWidth="2";
    pen.moveTo(200,70);
    pen.lineTo(200,120);
    pen.moveTo(160,70);
    pen.lineTo(180,122);
    pen.moveTo(240,70);
    pen.lineTo(220,122);
    pen.stroke();
</script>
</body>
</html>